<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>欢太官网</title>
    <link rel="shortcut icon" type="image/x-icon" href="//image.oppo.com/content/dam/heytap-brand/assets/favicon.ico">
    <script src="../js/axios.min.js"></script>
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="//image.oppo.com/content/dam/heytap-brand/assets/favicon.ico"
    />
    <style>
      body {
        background-image: url(https://id.heytap.com/new/images/login-bg.56a249bc.png);
        background-repeat: no-repeat;
        background-size: cover;
      }
      * {
        margin: 0;
        padding: 0;
      }
      h3 {
        margin-left: 20px;
      }
      .login {
        width: 600px;
        height: 400px;
        margin: auto;
        position: relative;
        background-color: rgba(148, 173, 148, 0.253);
      }
      td {
        margin-left: 20px;
      }
      tr {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        align-items: center;
      }
      table span {
        color: red;
        font-size: 20px;
        vertical-align: middle;
      }
      table input {
        width: 200px;
        height: 40px;
        border-radius: 5px;
        background-color: rgb(247, 247, 247);
        border: none;
      }
      p {
        color: red;
        opacity: 0;
      }
      button {
        width: 100px;
        height: 40px;
        position: absolute;
        bottom: 50px;
        left: 180px;
        border-radius: 10px;
        cursor: pointer;
        border: none;
        color: white;
        background-color: rgb(42, 209, 129);
      }
      .duihao {
        margin-top: 30px;
      }
      .duihao span {
        color: red;
      }
      h1 {
        text-align: center;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <h1>注册账号</h1>
    <div class="login">
      <table>
        <tr>
          <td>手机号码<span>*</span></td>
          <td><input type="text" /></td>
          <td><p id="one">号码格式不正确</p></td>
        </tr>
        <tr>
          <td>设置密码<span>*</span></td>
          <td><input type="password" placeholder="6-12位密码" /></td>
          <td><p id="two">密码格式不正确</p></td>
        </tr>
        <tr>
          <td>确认密码<span>*</span></td>
          <td><input type="password" placeholder="请再次输入密码" /></td>
          <td><p id="three">输入密码不一致</p></td>
        </tr>
        <tr>
          <td>QQ邮箱<span>*</span>&nbsp;&nbsp;&nbsp;</td>
          <td><input type="text" placeholder="11*****@qq.com" /></td>
          <td><p id="four">邮箱地址不合法</p></td>
        </tr>
      </table>
      <div class="duihao">
        <input class="fore" type="checkbox" />已阅读并同意联想
        <span>用户注册协议</span>
        和
        <span>隐私政策</span>
      </div>
      <button>注册</button>
    </div>
    <script>
      let input = document.querySelectorAll("input");
      let address = "http://jx.xuzhixiang.top/ap/api/reg.php";

      let nav1 = document.querySelector("#one");
      let nav2 = document.querySelector("#two");
      let nav3 = document.querySelector("#three");
      let nav4 = document.querySelector("#four");
      let btn = document.querySelector("button");
      btn.onclick = function () {
        let username = input[0].value;
        let password = input[1].value;
        let res1 = /^1[3-9]\d{9}$/;
        if (res1.test(username) === true) {
          nav1.style.opacity = 0;
        } else {
          nav1.style.opacity = 1;
        }
        let res2 = /[1-9]\d{7,10}@qq\.com/;
        if (res2.test(input[3].value) == true) {
          nav4.style.opacity = 0;
        } else {
          nav4.style.opacity = 1;
        }
        let res3 = /^\w{6,12}$/;
        if (res3.test(input[1].value) == true) {
          nav2.style.opacity = 0;
        } else {
          nav2.style.opacity = 1;
        }
        let res4 = /^\w{6,12}$/;
        if (res3.test(input[2].value) == true) {
          nav3.style.opacity = 0;
        } else {
          nav3.style.opacity = 1;
        }
        if (
          input[1].value == input[2].value &&
          res3.test(input[1].value) == true
        ) {
          nav2.style.opacity = 0;
          nav3.style.opacity = 0;
        } else {
          nav3.style.opacity = 1;
        }

        if (nav1.style.opacity == 0) {
          if (nav2.style.opacity == 0) {
            if (nav3.style.opacity == 0) {
              if (nav4.style.opacity == 0) {
                location.href = "登录.html";
              }
            }
          }
        } else {
          console.log(2);
        }

        axios.get(address, { params: { username, password } }).then((r) => {
          console.log(r);
        });
      };

      //    接口地址：http://jx.xuzhixiang.top/ap/api/reg.php
      // 接口请求方式：get

      // 接口参数：
      //      username用户名
      //      password密码
      // 使用方式
      //      http://jx.xuzhixiang.top/ap/api/reg.php?username=11&password=1212

      // 服务器返回json数据
      /*       let address = "http://jx.xuzhixiang.top/ap/api/reg.php";
      var ipt = document.querySelectorAll("table input");
      var oP = document.querySelectorAll("p");
      var btn = document.querySelector("button");
      var arr = [
        /^\w{6,12}$/,
        /^\w{6,12}$/,
        /^\w{6,12}$/,
        /^\d{5,11}@qq\.com$/,
        /^[\u2E80-\u9FFFa-zA-Z]+$/,
        /^(1[3-9])\d{9}$/,
      ];
      ipt.forEach(function (v, i) {
        var reg = new RegExp(arr[i]);
        v.onchange = function () {
          var ret = v.value;
          var ret2 = reg.test(ret);

          if (ret2 == true) {
            oP[i].style.opacity = 0;
            if (ipt[2].value == ipt[1].value && ipt[2].value != null) {
              oP[2].style.opacity = 0;
            } else if (v.value != ipt[1].value) {
              ipt[2].value = "";
              oP[2].style.opacity = 1;
            }
          } else {
            oP[i].style.opacity = 1;
            v.value = "";
          }
          btn.onclick = function () {
            if (
              ipt[0].value &&
              ipt[1].value &&
              ipt[2].value &&
              ipt[3].value != ""
            ) {
              btn.style.background = "green";
              alert("注册成功");
              ipt[i].value = "";
            } else if (
              ipt[0].value &&
              ipt[1].value &&
              ipt[2].value &&
              ipt[3].value == ""
            ) {
              btn.style.background = "red";
              alert("请正确输入信息");
            }
          };
        };
      }); */
    </script>
  </body>
</html>
